import classNames from 'classnames';
import React, { ReactNode } from 'react';
import style from './index.module.scss';
// type InputProps = {
interface InputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  className?: string;
  errMsg?: string;
  extra?: ReactNode;
  // 索引类型
  // [key: string]: any;
}
export default function Input({
  className,
  errMsg,
  extra,
  ...restRrops
}: InputProps) {
  return (
    <div className={classNames((style.root, className))}>
      <div className="input-item">
        <div className="input-box">
          <input className="input" {...restRrops} />
          <div className="validate">{errMsg}</div>
          {extra && <div className="extra">{extra}</div>}
        </div>
      </div>
    </div>
  );
}
